<template>
    <app-dialog v-model="show" width="800px" title="编辑账号" @open="handleOpen">
        <template #fit_title>
            {{ state.dialogData.name }}
        </template>

        <div class="plantuser_dialog">
            <div class="buttons1" v-if="state.dialogData.environment_data.user.plantUser.length > 0">
                <app-button2 class="app-button-ptn" @click="openaddDialog()">添加新账号</app-button2>
                <app-button2 class="app-button-ptn" style="margin-left: 8px;"
                    @click="openseletcDialog()">添加已有账号</app-button2>
            </div>
            <div class="title">已有账号</div>

            <el-scrollbar height="280px" v-if="state.dialogData.environment_data.user.plantUser.length > 0">
                <div class="list">
                    <div class="item" v-for="item in state.dialogData.environment_data.user.plantUser"
                        :key="item.bc_type_id">
                        <img src="@/assets/home/platform.png" style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                        <div class="name">
                            <div style="color: #5b5c60;font-size: 12px">{{ item.name }}</div>
                            <div style="color: #87878b;font-size: 12px">{{ item.username }}</div>
                        </div>
                        <div class="icons1">
                            <img src="@/assets/home/edit_hover.png"
                                style="width: 16px;height: 16px;margin-right: 8px;cursor: pointer;" alt=""
                                @click="updateaddplat(item)">
                            <img src="@/assets/home/del-default_hover.png"
                                style="width: 16px;height: 16px;cursor: pointer;" @click="deleteplat(item)" alt="">
                        </div>
                    </div>

                </div>
            </el-scrollbar>

            <template v-if="state.dialogData.environment_data.user.plantUser.length == 0">
                <app-none :size="120" />
            </template>

            <template v-if="state.dialogData.environment_data.user.plantUser.length == 0">
                <div style="display: flex;justify-content: center;">
                    <app-button2 class="app-button-ptn" @click="openaddDialog()">添加新账号</app-button2>
                    <app-button2 class="app-button-ptn" style="margin-left: 8px;"
                        @click="openseletcDialog()">添加已有账号</app-button2>
                </div>
            </template>



        </div>

        <template #footer>
            <app-button @click="handleClose">关闭</app-button>
            <!-- <app-button class="app-button-ptn" style="margin-left: 8px;" @click="clickSubmit()">确定</app-button> -->
        </template>

        <app-dialog-add-plantuser v-model="showaddDialog" :data="state.dialogData" :formData2="formData2"
            v-if="showaddDialog" @change2="changeaddplatuser" />
        <app-dialog-select-plantuser v-model="showselectuser" :data="state.dialogData" v-if="showselectuser"
            @change2="changeaddplatuser" />
    </app-dialog>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
const show = defineModel({ type: Boolean })
const emits = defineEmits(['change'])
const { store, state } = inject('storejs')
const formData2 = ref({})

const handleOpen = () => {
    formData2.value = {}
}

const showaddDialog = ref(false)
const showselectuser = ref(false)

const handleClose = () => {
    show.value = false
    showaddDialog.value = false
    state.dialogData = {}
}

const clickSubmit = () => {
    let body = JSON.parse(JSON.stringify(state.dialogData.environment_data))
    body.id = state.dialogData.id
    body.number = state.dialogData.number
    body.name = state.dialogData.name
    body.remark = state.dialogData.environment_data.remark ? state.dialogData.environment_data.remark : ''
    http.put('/environment/update_environment', body).then((res) => {
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
        handleClose()
        store.getEnvironmentList()
    })


}

const deleteplat = (row) => {
    if (row.id) {

        let body = JSON.parse(JSON.stringify(state.dialogData.environment_data))
        body.id = state.dialogData.id
        body.number = state.dialogData.number
        body.name = state.dialogData.name
        body.remark = state.dialogData.environment_data.remark ? state.dialogData.environment_data.remark : ''

        let updatedData = body.user.plantUser.filter(item => item.id !== row.id);
        body.user.plantUser = updatedData
        http.put('/environment/update_environment', body).then((res) => {
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
            handleClose()
            store.getEnvironmentList()
        })
    }

}

const openaddDialog = () => {
    formData2.value = {}
    showaddDialog.value = true
}

const changeaddplatuser = () => {
    show.value = false
    store.getEnvironmentList()
}

const updateaddplat = (row) => {
    console.log(row);

    formData2.value = row
    showaddDialog.value = true
}

const openseletcDialog = () => {
    showselectuser.value = true
}
</script>

<style lang="scss" scoped>
.plantuser_dialog {
    margin: 24px;
    background: #fcfcfd;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    height: 400px;
    padding: 16px;
    display: flex;
    flex-direction: column;

    .buttons1 {
        display: flex;
        margin-bottom: 16px;
    }

    .title {
        margin-bottom: 16px;
    }

    .list {
        display: flex;
        flex-wrap: wrap;

        .item {
            height: 54px;
            padding: 0 16px;
            background: #fff;
            border: 1px solid #ececec;
            display: flex;
            align-items: center;
            margin: 0 16px 16px 0;

            .name {
                display: flex;
                flex-direction: column;
                width: 80px;
            }

            .icons1 {
                display: flex;
            }
        }
    }
}
</style>